<!-- 订单 -->
<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="topNav" v-if="haveOrder">
			<view class="son" v-for="(k,i) in nav" :class="k.isAct?'act':''" @click="act(k)">
				{{k.name}}
			</view>
		</view>
		<!-- 无订单样式 -->
		<view class="noOrder" v-if="!haveOrder">
			<image src="/static/images/background/my/noOrders.webp" mode="aspectFit"></image>
			<view class="text">暂无秒杀</view>
		</view>
		<!-- 内容 -->
		<view class="content" v-for="(k,i) in nav" v-if="k.isAct">
			<!-- {{k.name}} -->
			<view class="son" v-for="(k,i) in ordersMsg" :key="k.id">
				<view class="orderNum">订单号：{{k.orderNum}}</view>
				<view class="state" v-html="k.isPaid?'已付款':'待付款'" :style="{'color':k.isPaid?'':'#333333'}" ></view><!-- 订单状态 -->
				<view class="msg">
					<image :src="k.pic" mode="aspectFill"></image>
					<view class="name">{{k.name}}</view>
					<view class="price">￥{{k.price}}</view>
				</view>
				<view class="time">2019/11/06 13:46</view>
				<button v-if="!k.isPaid">去支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				haveOrder: true, //是否有订单
				nav: [{ //导航栏
					name: '全部',
					isAct: true,
				}, {
					name: '待付款',
					isAct: false,
				}, {
					name: '已付款',
					isAct: false,
				}],
				//订单信息
				ordersMsg: [
					{
						orderNum: 24848157462144655,
						isPaid: true,
						pic: '/static/user/dingdan/dingdan.webp',
						name: '专车空调全包班',
						price: 12000.00,
						time: '2019/11/06 13:46',
						id:1
					},{
						orderNum: 24848157462144655,
						isPaid: false,
						pic: '/static/user/dingdan/dingdan.webp',
						name: '专车空调全包班',
						price: 12000.00,
						time: '2019/11/06 13:46',
						id:2
					}
				], 
			}
		},
		methods: {
			act(k) {
				for (var a = 0; a < this.nav.length; a++) {
					this.nav[a].isAct = false
				}
				k.isAct = true
				
			}
		},
		onLoad() {
			if(this.ordersMsg.length==0)
			this.haveOrder=false
			else
			this.haveOrder=true
		}
	}
</script>

<style>
	page {
		background-color: #F2F3F5;
	}

	/* 无订单start */
	.noOrder {
		position: relative;
		left: 212rpx;
		top: 268rpx;
		width: 326rpx;
		height: 196rpx;
	}

	.noOrder image {
		width: 326rpx;
		height: 196rpx;
	}

	.noOrder .text {
		margin: 30rpx auto 0;
		width: 112rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		color: #999999;
		line-height: 28rpx;
	}

	/* 无订单end */

	/* 顶部导航栏start */
	.topNav {
		display: flex;
		justify-content: space-around;
		width: 750rpx;
		height: 88rpx;
		background: #fff;
	}

	.topNav .son {
		box-sizing: border-box;
		height: 88rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		color: #333333;
		line-height: 88rpx;
	}

	.topNav .act {
		color: #29c563;
		border-bottom: 6rpx solid #29c563;
	}

	/* 顶部导航栏end */

	/* 内容start */
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content .son {
		position: relative;
		margin-top: 24rpx;
		width: 702rpx;
		height: 348rpx;
		background: #ffffff;
		border-radius: 16rpx;
	}

	.son .orderNum {
		position: absolute;
		top: 30rpx;
		left: 20rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
		line-height: 28rpx;
	}

	.son button {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		width: 160rpx;
		height: 50rpx;
		border: 1rpx solid #29c563;
		border-radius: 26rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		color: #29c563;
		line-height: 50rpx;
	}

	.son .state {
		position: absolute;
		top: 30rpx;
		right: 20rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		color: #f93030;
		line-height: 28rpx;
	}

	/* 订单班类start */
	.son .msg {
		position: absolute;
		top: 88rpx;
		left: 20rpx;
		width: 662rpx;
		height: 170rpx;
		background: #f5f5f5;
	}


	.msg image {
		position: absolute;
		top: 20rpx;
		left: 28rpx;
		width: 130rpx;
		height: 130rpx;
	}

	.msg .name {
		position: absolute;
		left: 178rpx;
		top: 30rpx;
		height: 32rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		color: #333333;
		line-height: 32rpx;
	}

	.msg .price {
		position: absolute;
		top: 82rpx;
		left: 178rpx;
		height: 40rpx;
		font-size: 40rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		color: #111111;
		line-height: 40rpx;
	}

	/* 订单班类end */

	.son .time {
		position: absolute;
		left: 26rpx;
		bottom: 31rpx;
		height: 26rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #c7c7c7;
		line-height: 26rpx;
	}

	/* 内容end */
</style>
